﻿@using CleanArchitecture.Blazor.Application.Features.SystemLogs.DTOs
@using CleanArchitecture.Blazor.Application.Features.SystemLogs.Queries.ChatData
@using ApexCharts
@implements IDisposable

@inject LayoutService LayoutService
@inject IStringLocalizer<SystemLogs> L

<div class="d-flex flex-grow-1 mb-2">
    <MudPaper Class="pa-5 flex-grow-1" Elevation="3">
        @if (Data.Any())
        {
            <ApexChart @ref="Chart" Options="Options" TItem="SystemLogTimeLineDto" Height="180"
                       Title="@L["Collect logs by day"]">
                <ApexPointSeries TItem="SystemLogTimeLineDto"
                                 Items="Data"
                                 Name="Count"
                                 XValue="@(e => e.dt.ToString("MMM-d"))"
                                 YValue="@(e => e.total)"
                                 YAggregate="@(e => e.Sum(e => e.total))"
                                 SeriesType="SeriesType.Bar" />
            </ApexChart>
        }
        else
        {
            <MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="100%" Height="160px" />
        }
    </MudPaper>
</div>

@code
{
    public List<SystemLogTimeLineDto> Data { get; set; } = new();
    private ApexChart<SystemLogTimeLineDto> Chart { get; set; } = null!;
    private ApexChartOptions<SystemLogTimeLineDto> Options { get; set; } = new();



    protected override async Task OnInitializedAsync()
    {
        var isDarkMode = LayoutService.IsDarkMode;
        var colors = isDarkMode ? new List<string> { "#0277BD", "#039BE5" } : new List<string> { "#1976D2", "#90CAF9" };
        Options.Chart.Background = "transparent";
        Options.Theme = new Theme
            {
                Mode = isDarkMode ? Mode.Dark : Mode.Light,
            };

        Options.Fill = new Fill
            {
                Type = new List<FillType> { FillType.Gradient },
                Gradient = new FillGradient
                {
                    Type = GradientType.Vertical,
                    ShadeIntensity = 1,
                    OpacityFrom = 1,
                    OpacityTo = 0.7,
                    GradientToColors = colors,
                    Stops = new List<double> { 0, 100 }
                }
            };
        Options.Yaxis = new List<YAxis>();
        Options.Yaxis.Add(new YAxis
            {
                Labels = new YAxisLabels
                {
                    Formatter = @"function (value, opts) {
                                    if(value == '' || value == null) { return ''; }
                                    return Number(value).toLocaleString();
                                  }"
                }
            }
        );
        Options.Xaxis = new XAxis
            {
                Labels = new XAxisLabels
                {
                    Formatter = @"function (value) {
                    if (value === undefined) {return '';}
                    return '';}"
                }
            };

        Options.DataLabels = new DataLabels
            {
                Formatter = @"function (value, opts) {
                                    if(value == '' || value == null) { return ''; }
                                    return Number(value).toLocaleString();
                              }"
            };

        Options.Tooltip = new Tooltip
            {
                X = new TooltipX
                {
                    Formatter = @"function(value, opts) {
                    if (value === undefined) {return '';}
                    return  value}"
                }
            };

        LayoutService.MajorUpdateOccured += LayoutServiceOnMajorUpdateOccured;

        Data = await Mediator.Send(new SystemLogsTimeLineChatDataQuery());
    }

    private void LayoutServiceOnMajorUpdateOccured(object? sender, EventArgs e)
    {
        InvokeAsync(async () =>
        {
            var isDarkMode = LayoutService.IsDarkMode;
            var colors = isDarkMode ? new List<string> { "#0277BD", "#039BE5" } : new List<string> { "#1976D2", "#90CAF9" };
            Options.Theme.Mode = isDarkMode ? Mode.Dark : Mode.Light;
            Options.Fill.Gradient.GradientToColors = colors;

            await Chart.UpdateOptionsAsync(true, true, false);
            await Chart.RenderAsync();
            StateHasChanged();
        });
    }


    public void Dispose()
    {
        LayoutService.MajorUpdateOccured -= LayoutServiceOnMajorUpdateOccured;
        GC.SuppressFinalize(this);
    }
}